<template>
  <Card :style="style" hoverable>
    <div class="px-4">
      <!--      <CountTo prefix="订阅量" :startVal="1" :endVal="10000" class="text-2xl" color="grey" />-->
      <div class="px-4 font-light mb-10px flex justify-between">
        <span class="text-base">{{ title }}</span>
      </div>
      <span class="ml-4 text-2xl font-bold text-sl-slBlue">{{ counts }}</span>
      <CloudTwoTone style="font-size: 40px" class="float-right" />
    </div>
  </Card>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Card } from 'ant-design-vue';
import { CloudTwoTone } from '@ant-design/icons-vue';

export default defineComponent({
  components: {
    Card,
    CloudTwoTone,
  },
  props: {
    title: String,
    count: Number,
  },
  setup(prop) {
    const titles = ref(prop.title);
    const counts = ref(prop.count);

    return {
      titles,
      counts,
    };
  },
});
</script>
